<template>
  <div>
    <div class="title font14 ma30-15">
      <p>基本信息</p>
    </div>

    <el-form
      :model="ruleForm"
      :rules="ruleFormRules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm mt20"
    >
      <!-- 基本信息 -->
      <div class="pa15 bor7 create">
        <div class="clearfix">
          <div class="fr details-but">
            <router-link to=""
              ><el-button @click="$router.back(-1)" class="primary1"
                >返回</el-button
              ></router-link
            >
          </div>
        </div>
        <el-form-item label="团队名称" prop="name" class="font12" required>
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入团队名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="城市" class="font12 wid50">
          <vCity ref="getConCity" :setCity="ruleForm.city"  :key="ruleForm.city"></vCity>
        </el-form-item>

        <el-form-item
          label="团队海报"
          prop="image"
          class="font12 huodonghaibao"
          required
        >
          <!-- <img src="../../img/2.jpg" alt /> -->
          <el-row :gutter="20">
            <el-col :span="6" class="p_l_no">
              <el-upload
                class="upload-demo"
                drag
                action="#"
                ref="upload"
                :file-list="files"
                :http-request="handleUpload"
                :auto-upload="true"
              >
                <div class="grid-content bg-purple">
                  <img
                    v-if="imageUrl"
                    :src="imageUrl"
                    v-model="ruleForm.image"
                    class="avatar w100"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </div>
              </el-upload>
            </el-col>
            <el-col :span="6" class="p_lr_100">
              <div class="grid-content bg-purple font12">
                <div class="bg-purple-text">
                  <p class="colred">温馨提示</p>
                  1、图片尺寸 1080*640，.jpg 或 .png格式，不超过 4M
                  <br />2、精美海报有助于增加报名量，并有机会获得强力推荐！
                  <div>
                    <!--el-button @click="CancelUpload">取 消</el-button-->
                    <!--el-button
                      type="primary"
                      class="primary"
                      @click="fileChange"
                      >上传海报</el-button-->
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item
          label="团队类型"
          prop="type"
          required
          class="wid50 font12"
        >
          <el-select v-model="ruleForm.type" placeholder="请选择活动类型">
            <el-option
              v-for="item in this.defaultList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员" class="font12 create-label">
          <span
            >{{ infoNum.nickname }}(ID:{{ infoNum.id }}，手机号码:{{
              infoNum.mobile
            }})</span
          >
        </el-form-item>
        <el-form-item label="关键词" class="font12 create-label wid50">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入关键词" disabled
          ></el-input>
        </el-form-item>
        <!--  -->

        <el-form-item
          label="管理员称号"
          prop="user_title1"
          required
          class="wid50 font12"
        >
          <el-select
            v-model="ruleForm.user_title1" disabled
            placeholder="请输入管理员称号"

          >
            <el-option
              v-for="item in this.titleList" disabled
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="副管理员称号"
          prop="user_title2"
          required
          class="wid50 font12"
        >
          <el-select
            v-model="ruleForm.user_title2"
            placeholder="请输入副管理员称号"
            disabled
          >
            <el-option
              v-for="item in this.titleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="会员称号"
          prop="user_title3"
          required
          class="wid50 font12"
        >
          <el-select
            v-model="ruleForm.user_title3"
            placeholder="请输入会员称号"
            disabled
          >
            <el-option
              v-for="item in this.titleList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--  -->
        <el-form-item
          label="副管理员"
          class="font12 create-label"
          v-if="this.$route.query.id"
        >
          <el-col
            :span="24"
            v-for="item in this.dataonLineListSelections"
            :key="item.id"
          >
            <span
              >{{ item.nickname }}(ID:{{ item.id }}，手机号码:{{
                item.mobile
              }})</span
            >
          </el-col>

          <div
            class="details-fix details-but1"
            style="margin-left: 0 !important"
          >
            <el-button
              type="text"
              class="details-but primary"
              @click="setteamuser()"
              >重新设置</el-button
            >
          </div>
        </el-form-item>

        <el-form-item label="加入审核" prop="is_verify" class="font12" required>
          <el-radio-group v-model="ruleForm.is_verify">
            <el-radio :label="1" value="1">需要</el-radio>
            <el-radio :label="0" value="0">不需要</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="信息公开"
          prop="is_infopub"
          class="font12"
          required
        >
          <el-radio-group v-model="ruleForm.is_infopub">
            <el-radio :label="1" value="1">是</el-radio>
            <el-radio :label="0" value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="名单公开"
          prop="is_userpub"
          class="font12"
          required
        >
          <el-radio-group v-model="ruleForm.is_userpub">
            <el-radio :label="1" value="1">是</el-radio>
            <el-radio :label="0" value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>

      <!-- 副管理员重新设置弹出框 -->
      <el-dialog
        title="设置副管理员"
        :visible.sync="dialogVisible"
        width="30%"
        class="host_pop_up"
      >
        <form action="">
          <div class="clearfix">
            <div class="fl">
              <input
                v-model="ruleForm.keywords"
                size="medium"
                placeholder="请输入用户昵称"
              />
            </div>
            <div class="fr">
              <el-button @click.prevent="searchTeam()">查询</el-button>
            </div>
          </div>
          <el-table
            highlight-current-row
            :data="tableData"
            @selection-change="selectionLineChangeHandle"
            style="width: 100%"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="30"></el-table-column>
            <el-table-column prop="user.id" label="会员ID"> </el-table-column>
            <el-table-column prop="user.nickname" label="昵称">
            </el-table-column>
            <el-table-column prop="realname" label="真实姓名">
            </el-table-column>
          </el-table>
        </form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="setaide()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 参与人员开始 -->
      <div class="active_join_number">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="参与人员" class="title font14" name="first">
            <div class="take_part bor7">
              <ul class="clearfix">
                <li v-for="(neirong, d) in this.teamuserList" :key="d">
                  <div>
                    <div class="img">
                      <img :src="$api + neirong.user.avatar" alt />
                    </div>
                    <div class="name">{{ neirong.user.nickname }}</div>
                    <div class="text">参与人员</div>
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        sendMsgToOne(
                          '' + neirong.user.id + '',
                          '' + neirong.user.nickname + ''
                        )
                      "
                      >发消息</el-button
                    >
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        getMemberDetail(
                          '' + neirong.name + '',
                          '' + neirong.phone + '',
                          '' + neirong.email + '',
                          '' + neirong.sex + '',
                          '' + neirong.city + ''
                        )
                      "
                      >会员详情</el-button
                    >
                  </div>
                </li>
              </ul>
              <el-empty
                description="暂无人员加入"
                v-if="teamuserPageInfo.total == 0"
              ></el-empty>
              <div class="ta">
                <el-pagination
                  layout="  prev, next "
                  :page-size="page_size"
                  @current-change="current_change"
                  :current-page.sync="currentPage"
                  :pager-count="5"
                  :total="teamuserPageInfo.total"
                  v-if="teamuserPageInfo.total > 10"
                >
                </el-pagination>

                <el-button
                  type="text"
                  class="sxqd cf"
                  @click="sendMsgToOne('', '所有的参与人员')"
                  v-if="teamuserPageInfo.total > 0"
                  >群发消息</el-button
                >
                <el-button
                  type="primary"
                  class="sxqd"
                  @click="exportMember()"
                  v-if="teamuserPageInfo.total > 0"
                  >导出会员</el-button
                >
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="等待参与者" class="title font14" name="second">
            <div class="take_part bor7">
              <ul class="clearfix">
                <li v-for="(neirong, d) in this.teamuserListTwo" :key="d">
                  <div>
                    <div class="img">
                      <img :src="$api + neirong.user.avatar" alt />
                    </div>
                    <div class="name">{{ neirong.user.nickname }}</div>
                    <div class="text">参与人员</div>
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        sendMsgToOne(
                          '' + neirong.user.id + '',
                          '' + neirong.user.nickname + ''
                        )
                      "
                      >发消息</el-button
                    >
                    <el-button
                      type="text"
                      class="hover_42"
                      @click="
                        getMemberDetail(
                          '' + neirong.name + '',
                          '' + neirong.phone + '',
                          '' + neirong.email + '',
                          '' + neirong.sex + '',
                          '' + neirong.city + ''
                        )
                      "
                      >会员详情</el-button
                    >
                  </div>
                </li>
              </ul>
              <el-empty
                description="暂无人员加入"
                v-if="teamuserPageInfoTwo.total == 0"
              ></el-empty>
              <div class="ta">
                <el-pagination
                  layout="  prev, next "
                  :page-size="page_size"
                  @current-change="current_changeTwo"
                  :current-page.sync="currentPage"
                  :pager-count="5"
                  :total="teamuserPageInfoTwo.total"
                  v-if="teamuserPageInfoTwo.total > 10"
                >
                </el-pagination>

                <!--el-button
                  type="text"
                  class="sxqd cf"
                  @click="sendMsgToOne('', '所有的参与人员')"
                  v-if="teamuserPageInfo.total > 0"
                  >群发消息</el-button
                >
                <el-button
                  type="primary"
                  class="sxqd"
                  @click="exportMember()"
                  v-if="teamuserPageInfo.total > 0"
                  >导出会员</el-button
                -->
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 参与人员结束 -->

      <!-- 参与人员弹出开始 -->
      <div class="list_info">
        <el-dialog title="消息详情" :visible.sync="dialogVisible1" width="40%">
          <div>
            <div class="text">
              发送给：
              <span>{{ sendname }}</span>
              <!--el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择文章标签"
              >
                <el-option
                  v-for="item in renyuan"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select-->
            </div>
            <div class="text">消息详情</div>
            <div class="textarea">
              <textarea v-model="msg" id=""></textarea>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="ta">
              <el-button type="primary fsxx" @click="sendMsg()">发送</el-button>
            </div>
          </span>
        </el-dialog>
      </div>
      <!-- 参与人员弹出结束 -->
      <!-- 会员详情弹出开始 -->
      <div class="number_detail list_info">
        <el-dialog
          title="参与人员详情"
          :visible.sync="memberDetail"
          width="40%"
        >
          <el-form :label-position="menberDetailPosition">
            <el-form-item label="真实姓名">
              <el-input v-model="memberData.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="memberData.phone" disabled></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="memberData.email" disabled></el-input>
            </el-form-item>
            <el-form-item label="所在城市">
              <el-input v-model="memberData.city" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!-- 会员详情弹出介绍 -->

      <!--  -->
      <div class="title font14 ma30-15">
        <p>团队介绍</p>
      </div>
      <!-- 活动内容 -->
      <div class="pa15 bor7 details-fng">
        <div class="quill-box">
          <el-form-item prop="content">
            <quill-editor
              v-model="ruleForm.content"
              :options="editorOption"
              ref="content"
            ></quill-editor>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="ta mt20" style="display:none;">
      <el-button type="submit" class="baocun" @click="handleSubmit">
        保存团体信息
      </el-button>
    </div>
  </div>
</template>



<style scoped>
.primary1:hover {
  background: #fff !important;
  color: #4285f4 !important;
}
.p_l_no {
  padding-left: 0 !important;
}
.avatar.w100 {
  object-fit: cover;
  width: 100% !important;
}
html {
  height: 100% !important;
  overflow-y: hidden !important;
}
.details-but {
  border-radius: 5px;
  border: none;
  margin-bottom: 15px;
}
.details {
}
.modal_inp input {
  padding: 0 1.25rem;
}
.el-form-item__label {
}
.details .demo-ruleForm > div label {
  text-align: left;
  font-size: 0.75rem;
}
.details .line {
  text-align: center;
}
.el-select,
.el-cascader {
  width: 100%;
}
.details .el-col-20 {
  width: 82.33333%;
  margin-left: 1%;
}
.wid50 {
  width: 50%;
}
.details-fix .el-button {
  padding: 0.3125rem 0.625rem;
  font-size: 0.875rem;
}
.details-fix .el-button--success {
  background: #19a15f;
}
.el-form-item > label {
  text-align: left !important;
}
.details .font12 label {
  text-align: left;
  font-size: 0.75rem;
}
.details-fix-duv .bg-purple {
  border: 1px solid #d8d8d8;
  text-align: center;
  color: #b2b2b2;
  padding: 3rem 0;
}
.details-fix-duv .bg-purple:hover {
  border-color: #4285f4;
}
.details-fix-duv .el-col-5 {
  width: 20%;
  margin-bottom: 1.25rem;
}
.details-fix-duv .bg-purple p:nth-of-type(1) {
  color: #545556;
  margin: 1.25rem 0 0.625rem;
}
.details-fix-duv .bg-purple img {
  width: 6.375rem;
  object-fit: cover;
}
.quill-box .quill-editor {
  overflow: hidden;
  font-style: initial;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 100% !important;
  position: relative;
  /* min-height: 14.0625rem;
  font-style: initial; */
}
.ql-editor {
}
.details-but .el-button {
  padding: 0.75rem 2rem;
}
/* .create-label {
  margin-bottom: 0 !important;
} */
.create-col span {
  color: #545556;
  opacity: 0.36;
}
.details-but1 {
  display: inline-block;
  margin-left: 0.9375rem;
}
.modal_inp input {
  width: 100%;
  border: 1px solid #d8d8d8;
  border-radius: 0.25rem;
  height: 2.5rem;
}
.modal_inp button {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: #c2cfe0;
  font-size: 1.25rem;
  background: none;
  border: none;
}
.modal_div_tit {
  font-size: 0.875rem;
  color: #000000;
  font-weight: bold;
}
.table > tbody > tr {
  font-size: 0.75rem;
}
.table > tbody > tr > th {
  border-top: none;
  font-size: 0.875rem;
  text-align: center;
}
.table-responsive .table {
  margin-bottom: 0;
}
.table-responsive {
  border: 1px solid #ddd;
  padding: 0.3125rem;
  margin-top: 0.9375rem;
}
.take_part ul {
  padding: 2.5rem 0 0rem;
}

.take_part ul li {
  width: 20%;
  padding: 0 2.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
  float: left;
}
.take_part {
  padding-bottom: 2.5rem;
}
.take_part ul li > div {
  padding: 2.5rem 0.9375rem 1.5rem;
  border: 1px solid #ddd;
}
.take_part ul li .img,
.take_part ul li .img img {
  border-radius: 50%;
}
.take_part ul li .img img {
  width: 6.25rem;
  height: 6.25rem;
}
.take_part ul li .name {
  font-size: 1.125rem;
  margin-top: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}
@media (max-width: 990px) {
  .take_part ul li {
    width: 25%;
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .p_l_no {
    padding-left: 10px !important;
  }
  .take_part ul li {
    width: 50%;
    padding: 0 15px;
  }
  .take_part ul li > div {
    padding: 20px 0;
  }
}
</style>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import fileDownload from "js-file-download";
import vCity from "../../components/City.vue";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"],
  [{ size: ["small", false, "large", "huge"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ font: [] }],
];

export default {
  data() {
    return {
      dialogVisible1: false, //参与人员弹出
      memberDetail: false, //会员详情弹出
      memberData: [],
      dialogVisible: false, //弹出框
      tableData: [],
      keywords: "",
      dataonLineListSelections: [], //选中的副管理员
      content: ``,
      imageUrl: "",
      defaultList: [],
      titleList: [],
      cityList: [],
      defaultInfo: [],
      teamuserList: [], //选中的主持人
      teamuserPageInfo: [], //选中的主持人、分页
      teamuserListTwo: [], //未选中的主持人
      teamuserPageInfoTwo: [], //未选中的主持人、分页
      info: [],
      sendname: "所有的参与人员",
      msg: "",
      page_size: 8, //每页多少数据
      currentPage: 1, //默认当前页为第一页
      menberDetailPosition: "right",
      activeName: "first",

      ruleForm: [],
      ruleFormRules: {
        name: [
          {
            type: "string",
            required: true,
            message: "团队名称必填",
            trigger: "blur",
          },
          { max: 30, message: "团队名称长度不能超过30位" },
        ],
        image: [
          {
            type: "string",
            required: true,
            message: "图片要上传",
            trigger: "blur",
          },
        ],
        // city_text: [
        //   {
        //     type: "string",
        //     required: true,
        //     message: "城市必填",
        //     trigger: "blur",
        //   },
        // ],
        type: [{ required: true, message: "团队类型必填", trigger: "blur" }],
        user_title1: [
          { required: true, message: "管理员称号必填", trigger: "blur" },
        ],
        user_title2: [
          { required: true, message: "副管理员称号必填", trigger: "blur" },
        ],
        user_title3: [
          { required: true, message: "会员称号必填", trigger: "blur" },
        ],

        is_verify: [{ required: true, message: "是否审核", trigger: "blur" }],
        is_infopub: [
          { required: true, message: "是否信息公开", trigger: "blur" },
        ],
        is_userpub: [
          { required: true, message: "是否名单公开", trigger: "blur" },
        ],
        content: [{ required: true, message: "内容必填", trigger: "blur" }],
      },
      files: [],
      infoNum: [],
      editorOption: {
        placeholder: "内容编辑",
        modules: {
          toolbar: {
            container: toolbarOptions,
            // ...
          },
        },
      },
      cityArr: [],
      cityArr1: [],
      options: regionData,
      selectedOptions: [],
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getMemberDetail(name, phone, email, sex, city) {
      this.memberDetail = true;
      this.memberData.name = name;
      this.memberData.phone = phone;
      this.memberData.email = email;
      this.memberData.sex = sex;
      this.memberData.city = city;
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("图片尺寸 1080*640，.jpg 或 .png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片尺寸不能超过 4M!");
      }
      return isJPG && isLt2M;
    },
    //发送单人
    sendMsgToOne(user_id, nickname) {
      this.dialogVisible1 = true;
      this.ruleForm.receive_type = "one";
      this.sendname = nickname;
      this.ruleForm.receive_id = user_id;
    },
    //发送消息
    sendMsg() {
      var that = this;
      var url = this.$api + "/api/message/add";

      if (this.sendname == "所有的参与人员") {
        this.ruleForm.receive_id = "";
        this.ruleForm.receive_type = "all";
      } else {
        this.ruleForm.receive_type = "one";
      }

      if (this.teamuserPageInfo.total == 0) {
        that.$message.error("暂无人员加入");
        return false;
      }

      if (!this.msg) {
        that.$message.error("消息不能为空");
        return false;
      }

      var jsons = {
        team_id: this.$route.query.id,
        content: this.msg,
        title: "团队的消息",
        type: this.ruleForm.receive_type,
        receive_id: this.ruleForm.receive_id,
      };

      this.$axios
        .post(url, jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
            that.dialogVisible1 = false;
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
          that.$message.error(Error);
        });
    },
    exportMember() {
      var that = this;
      this.$axios
        .get(
          this.$api + "//api/my/exportteamuser?team_id=" + this.$route.query.id,
          { responseType: "blob" }
        )
        .then(function (response) {
          fileDownload(response.data, "会员列表.xls");
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getteamuserList() {
      //console.log("人员加入", 12313);
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/team/teamuser?team_id=" +
            this.$route.query.id +
            "&nickname=&page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size
        )
        .then(function (response) {
          that.teamuserList = response.data.data.data;
          that.teamuserPageInfo = response.data.data;
          //console.log("teamuserPageInfo", that.teamuserPageInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_change(currentPage) {
      //改变当前页
      this.currentPage = currentPage;
      this.getteamuserList();
    },
    getteamuserListTwo() {
      //console.log("人员加入", 12313);
      var that = this;
      this.$axios
        .get(
          this.$api +
            "//api/team/teamuser?is_go=0&team_id=" +
            this.$route.query.id +
            "&nickname=&page_no=" +
            that.currentPage +
            "&page_size=" +
            that.page_size
        )
        .then(function (response) {
          that.teamuserListTwo = response.data.data.data;
          that.teamuserPageInfoTwo = response.data.data;
          //console.log("teamuserPageInfo", that.teamuserPageInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    current_changeTwo(currentPage) {
      //改变当前页
      this.currentPageTwo = currentPage;
      this.getteamuserListTwo();
    },
    getActivityJoin() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/team/select")
        .then(function (response) {
          that.defaultList = response.data.data;
          // console.log(that.defaultList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getActivityTitle() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/team/usertitleselect")
        .then(function (response) {
          that.titleList = response.data.data;
          // console.log(that.titleList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    handleChange(value) {
      //console.log(value);
      var provinceCode = CodeToText[value[0]];
      var cityCode = CodeToText[value[1]];
      var orgion = CodeToText[value[2]];
      ////console.log(provinceCode)
      ////console.log(cityCode)
      ////console.log(orgion)
      this.ruleForm.city = [value[0], value[1], value[2]];
      this.ruleForm.city_text = provinceCode + "/" + cityCode + "/" + orgion;
    },
    //获取省份
    getcityList() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/common/cityselect")
        .then(function (response) {
          that.cityList = response.data.data;
          ////console.log("cityList", that.cityList);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    changeCity() {
      //省切换
      var me = this;
      var item;
      //console.log(111, me.prov);
      me.cityList.forEach(function (ele) {
        if (ele.n === me.ruleForm.prov) {
          //判断与prov是否相等，相等的表示被切换选中的省份
          item = ele;
        }
      });
      if (item) {
        this.cityArr = item.s; //将选中的item的sub设置给cityArr 用于显示市
        this.city = item.s[0].n; //默认选择第一个市
        //console.log("city", this.cityArr);

        this.cityArr1 = [];
        this.city1 = "";
      }
    },
    changeCity1() {
      //市切换
      var me = this;
      var item;
      me.cityArr.forEach(function (ele) {
        if (ele.n === me.ruleForm.city) {
          //判断与city是否相等，相等的表示被切换选中的市
          item = ele;
        }
      });
      if (item) {
        this.cityArr1 = item.s; //将选中的item的sub设置给cityArr1 用于显示区
        this.city1 = item.s[0].n; //默认选择第一个区
        //console.log("city1", this.cityArr1);
      }
    },
    //获取团队成员
    getteamUser() {
      var that = this;
      //console.log("ruleForm", this.ruleForm);

      if (!this.ruleForm.keywords) {
        this.ruleForm.keywords = "";
      }

      this.$axios

        .get(
          this.$api +
            "/api/my/teamuserselect?team_id=" +
            this.$route.query.id +
            "&nickname=" +
            this.ruleForm.keywords
        )
        .then(function (response) {
          that.tableData = response.data.data.data;
          //console.log("获取团队成员", that.tableData);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    //设置选中的团队成员
    setteamuser() {
      this.dialogVisible = true;
      //console.log('设置选中的团队成员');
      //新建新的成员结构
      var tableDataNew = [];
      if (this.tableData.length > 0) {
        for (var i = 0; i < this.tableData.length; i++) {
          var user_id = this.tableData[i].user.id;
          tableDataNew[user_id] = this.tableData[i];
        }
      }
      //console.log("新的成员数据", tableDataNew);

      if (this.dataonLineListSelections.length > 0) {
        ////console.log("已选中的成员数据", this.dataonLineListSelections);
        this.$nextTick(() => {
          this.dataonLineListSelections.forEach((item, i, arr) => {
            //console.log('已选中：'+i, item.id);
            //console.log('已选中数据：'+i, tableDataNew[item.id]);
            if (tableDataNew[item.id]) {
              this.$refs.multipleTable.toggleRowSelection(
                tableDataNew[item.id],
                true
              );
            }
          });
        });
      }
    },
    //设置副管理员
    setaide() {
      this.dialogVisible = false;
      var ids = "";
      if (this.dataonLineListSelections.length > 0) {
        for (var i = 0; i < this.dataonLineListSelections.length; i++) {
          ids += this.dataonLineListSelections[i].id + ",";
        }
      }

      ids = ids.replace(/^,+/, "").replace(/,+$/, "");

      if (!ids) {
        //console.log('未选');
        return false;
      }

      var jsons = {
        user_id: ids,
        team_id: this.$route.query.id,
      };

      var that = this;

      this.$axios
        .post(this.$api + "//api/team/setaide", jsons)
        .then((res) => {
          //console.log(res.data);
          if (res.data.code == 1) {
            that.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            that.$message.error(res.data.msg);
          }
        })
        .catch((Error) => {
          //console.log(Error);
          that.$message.error(Error);
        });
    },
    //获取详情
    getDefaultInfo() {
      var that = this;
      if (!this.$route.query.id) {
        return false;
      }

      this.$axios
        .get(this.$api + "//api/team/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.defaultInfo = response.data;
          //console.log("getDefaultInfo", that.defaultInfo);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },

    //提交
    handleSubmit() {
      this.$nextTick(() => {
        this.$refs.ruleForm.validate(async (valid) => {
          if (valid) {
            if (!this.$refs["getConCity"].city) {
              this.$message.error("请输入所在城市");
              return false;
            }

            // console.log(this.ruleForm.user_title1);
            //定义一个json示例
            if (this.$route.query.id) {
              var url = this.$api + "/api/team/edit";
              var jsons = {
                id: this.$route.query.id,
                name: this.ruleForm.name,
                type: this.ruleForm.type,
                image: this.ruleForm.image,
                content: this.ruleForm.content,
                city: this.$refs["getConCity"].city,
                is_verify: this.ruleForm.is_verify,
                is_infopub: this.ruleForm.is_infopub,
                is_userpub: this.ruleForm.is_userpub,
                keywords: this.ruleForm.keywords,
                user_title1: this.ruleForm.user_title1,
                user_title2: this.ruleForm.user_title2,
                user_title3: this.ruleForm.user_title3,
              };
            } else {
              var url = this.$api + "/api/team/add";
              var jsons = {
                name: this.ruleForm.name,
                type: this.ruleForm.type,
                image: this.ruleForm.image,
                content: this.ruleForm.content,
                city: this.$refs["getConCity"].city,
                is_verify: this.ruleForm.is_verify,
                is_infopub: this.ruleForm.is_infopub,
                is_userpub: this.ruleForm.is_userpub,
                keywords: this.ruleForm.keywords,
                user_title1: this.ruleForm.user_title1,
                user_title2: this.ruleForm.user_title2,
                user_title3: this.ruleForm.user_title3,
              };
            }

            var that = this;

            this.$axios
              .post(url, jsons)
              .then((res) => {
                //console.log(res.data);
                if (res.data.code == 1) {
                  that.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  that.$router.push("/my_group");
                } else {
                  that.$message.error(res.data.msg);
                }
              })
              .catch((Error) => {
                //console.log(Error);
                that.$message.error(Error);
              });
          }
        });
      });
    },
    //上传文件开始
    handleUpload(raw) {
      this.files.push(raw.file);
      this.fileChange();
      // //console.log(files);
    },
    async fileChange() {
      if (this.files.length > 1) {
        //this.$message.warning(`当前限制只能上传选择 1 个文件`);
        return;
      } else {
      }
      const loading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$refs.upload.submit(); // 这里是执行文件上传的函数，其实也就是获取我们要上传的文件
      let random = Math.random();
      let formData = new FormData();
      // formData.append("file", param.file);
      //formData.append("user_id", localStorage.user_id);
      this.files.forEach(function (file) {
        formData.append("file", file); // 因为要上传多个文件，所以需要遍历一下才行
        //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
      });
      let res = await this.$axios.post(
        this.$api + `/api/common/upload`,
        formData
      );
      //console.log(res);
      // JSON.parse(res)
      if (res.data.code == 1) {
        this.$refs.upload.clearFiles();
        this.files = [];
        let objList = [];
        loading.close();
        this.imageUrl = this.$api + res.data.data.url;
        this.$set(this.ruleForm, "image", res.data.data.url);
      } else {
        loading.close();
        this.$message.error("上传文件失败" + res.data.msg);
      }
    },
    handExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    CancelUpload() {
      this.files = [];
      this.$refs.upload.clearFiles();
    },
    handFileSuccess(file) {
      //console.log(file);
      this.files = [];
      this.$refs.upload.clearFiles();
    },
    handleRemove(file, fileList) {
      // //console.log(file, fileList);
      this.files = fileList;
    },
    beforeRemove(file, fileList) {
      // //console.log(file, fileList);
    },
    //上传文件结束
    getInfo() {
      if (!this.$route.query.id) {
        return false;
      }
      var that = this;
      this.$axios
        .get(this.$api + "//api/team/detail?id=" + this.$route.query.id)
        .then(function (response) {
          that.ruleForm = response.data.data;
          that.imageUrl = that.$api + response.data.data.image;

          that.dataonLineListSelections = response.data.data.aide;
          //console.log('已选择的副管理员', that.dataonLineListSelections);

          that.getteamuserList();
          that.getteamuserListTwo();

          //城市分开
          // var tcity = that.ruleForm.city;
          // that.ruleForm.city_text = that.ruleForm.city;
          // var tcity = tcity.split("/");
          // var code1 = TextToCode[tcity[0]].code;
          // var code2 = tcity[1] ? TextToCode[tcity[0]][tcity[1]].code : "";
          // var code3 = tcity[2]
          //   ? TextToCode[tcity[0]][tcity[1]][tcity[2]].code
          //   : "";
          // that.ruleForm.city = [code1, code2, code3];

          //console.log("info", response.data.data);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getUserInfo() {
      var that = this;
      this.$axios
        .get(this.$api + "//api/user/userinfo")
        .then(function (response) {
          that.infoNum = response.data.data;
          //console.log("infoNum1111", that.infoNum);
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    selectionLineChangeHandle(val) {
      // if (val.length > 1) {
      //   this.$refs.multipleTable.clearSelection();
      //   this.$refs.multipleTable.toggleRowSelection(val.pop());
      //   return;
      // }
      // if (val[0]) {
      //   this.selectstationid = val[0].id;
      //   this.selectstationname = val[0].siteName;
      // } else {
      //   this.selectstationid = "";
      //   this.selectstationname = "选择团队成员";
      // }
      //
      // //console.log("aaa", val[0].id);

      this.dataonLineListSelections = val;
      for (var i = 0; i < this.dataonLineListSelections.length; i++) {
        this.dataonLineListSelections[i] =
          this.dataonLineListSelections[i].user;
      }

      //this.setaide(ids);
    },
  },
  mounted() {
    document.documentElement.scrollTop = 0;
    this.getActivityJoin();
    this.getActivityTitle();
    this.getDefaultInfo();
    this.getInfo();
    this.getUserInfo();
    this.getteamUser();
    // this.getcityList();
  },
  components: {
    "quill-editor": quillEditor,
      vCity,
  },
};
</script>
